<template>
  <div class="login">
    <div class="loginContent">
      <div class="login-top">
        <h1>后台管理系统</h1> <span style="font-size: 14px;">v3.0</span>
      </div>
      <div class="login-form">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item prop="name" class="common">
            <el-input v-model="ruleForm.userName" prefix-icon="el-icon-user-solid"></el-input>
          </el-form-item>
          <el-form-item prop="password" class="common">
            <el-input v-model="ruleForm.pwd" prefix-icon="el-icon-lock"></el-input>
          </el-form-item>
          <el-form-item prop="imgcode" class="common ">
            <el-input v-model="ruleForm.imgcode" prefix-icon="el-icon-picture">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')" style="width: 100%;">立即登录</el-button>
          </el-form-item>
        </el-form>
        <img :src="src" alt="" @click="changecode">
      </div>
    </div>
  </div>
</template>
<script >
import { MyLogin } from "@/api/login"
export default {
  data() {
    return {
      ruleForm: {
        userName: '蔡徐坤',
        pwd: 'aaa111',
        imgcode: '',
        pdomain: 'zhangzhengyan',
        k: 0
      },
      src: "",
      rules: {
        userName: [
          { required: true, message: '请输入账户', trigger: 'blur' },
          { min: 3, max: 9, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 9, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        imgcode: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 4, max: 4, message: '请你确定验证码是否正确', trigger: 'blur' }
        ],
      }
    };
  },
  mounted() {
    this.getCode();
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let { data: res } = await MyLogin(this.ruleForm)
          sessionStorage.setItem("token", res.token);
          console.log(res);
          this.$message({
            message: '登录成功',
            type: 'success',
            duration: 1000
          });
          setTimeout(() => {
            this.$router.push("/HomeView");
          }, 1000)
        }
      });
    },
    changecode() {
      this.getCode();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getCode() {
      this.ruleForm.k = Math.random();
      this.src = "https://user.api.it120.cc/code?k=" + this.ruleForm.k;
    }
  }
}
</script>
<style lang="scss" scoped>
.login {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(45, 58, 75);

  .loginContent {
    width: 520px;
    height: 570px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;

    .login-top {
      width: 100%;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;

      h1 {
        font-size: 25px;
        color: white;
      }

      span {
        color: #ccc;
        margin-left: 5px;
      }
    }

    .login-form {
      width: 100%;

      ::v-deep .el-form-item__content {
        width: 100%;
        margin-left: 0 !important;
      }
    }
  }
}
</style>